---
category: FAQ
title: Icon Ligature Font(for IE)
layout: demo.hbs
order: 590
csslink:
    - https://fonts.googleapis.com/icon?family=Material+Icons
scriptpath:
    - '../../dist/extentions/tools/fontTools.js'
disabled: true
---

{{#marked}}
## Icon Ligature Font(for IE)
{{#if lang_ja}}
IE11を利用して、Web Font ICONを描画する際
ICONを合字から取得する方法
{{else}}
Drawing Web Font ICON in IE11
How to get ICON from Ligature
{{/if}}


{{#if lang_ja}}
注1: IEなどPromise未対応ブラウザでは[es6-promise](https://www.npmjs.com/package/es6-promise)などのpolyfillを読み込ませる必要があります。
{{else}}
Note1: If you use the browsers like IE, incompatiable with Promise, please load pollyfill such as [es6-promise](https://www.npmjs.com/package/es6-promise).  
{{/if}}
{{/marked}}

<div id="sample1" class="demo-grid small" style="height: 200px;">
</div>
<script type="text/javascript">
//{{#wrapscript}}
//{{#copy "sample1"}}
/*global cheetahGrid*/


// create cheetahGrid
const grid = new cheetahGrid.ListGrid({
	parentElement: document.querySelector('#sample1'),
	header: [
		{field: 'label', caption: 'Label', width: 150},
		{
			field: 'mdi',
			icon: {
				svg(rec) {
					return cheetahGrid.extentions.tools.fontTools.fontContentToSvg({
						font: '16px \'Material Icons\'',
						content: rec.mdi, // Ligature Symbols
					});
				},
				width: 16,
			},
			caption: 'Material Icons 1',
			width: 150,
		},
		{
			field: 'mdi',
			icon: {
				svg(rec) {
					const {font, color} = cheetahGrid.extentions.tools.fontTools.classNameToFont('material-icons');// Compute font from className
					return cheetahGrid.extentions.tools.fontTools.fontContentToSvg({
						font,
						color,
						content: rec.mdi, // Ligature Symbols
					});
				},
			},
			caption: 'Material Icons 2',
			width: 150,
		},
	],
	frozenColCount: 1
});
grid.records = [
	{label: 'grade', mdi: 'grade'},
	{label: 'autorenew', mdi: 'autorenew'},
	{label: 'thumb_up', mdi: 'thumb_up'},
	{label: 'slideshow', mdi: 'slideshow'},
	{
		label: 'multi',
		mdi: ['grade', 'autorenew', 'thumb_up', 'slideshow'],
	},
];

//{{/copy}}
//{{/wrapscript}}
</script>
{{#marked}}

{{#if lang_ja}}
この機能を利用するには`fontTools.js`を追加で読み込んでください。
{{else}}
To use this mode, please load `fontTools.js` in addition.  
{{/if}}

{{#if lang_ja}}
※サンプルで表示しているICONは[Material icons](https://material.io/icons/)を利用しています。
{{else}}
※This sample uses [Material icons](https://material.io/icons/).  
{{/if}}

```html
<!-- extention tool -->
<script type="text/javascript" src="./../../../../dist/extentions/tools/fontTools.js"></script>

<!-- Material Icons:  https://material.io/icons/ -->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
{{/marked}}

{{> code class="js" code=sample1}}
